<template>
  <el-dialog
      :title="!dataForm.id ? '新增' : '修改'"
      :close-on-click-modal="false"
      :visible.sync="visible"
      width="80%"
      top="20px">
    <div style="font-size: 28px;text-align: center;padding-bottom: 30px;">中国海警局南海分局值班表</div>
      
    <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()" label-width="80px">
      <div style="width: 100%;text-align: right;margin-bottom: 5px;">
        <el-date-picker
        v-model="dataForm.duty.time"
        format="yyyy-MM-dd HH:mm:ss"
        value-format="yyyy-MM-dd HH:mm:ss"
        type="date"
        placeholder="选择日期">
        </el-date-picker>
      </div>
      <table class="leftable">
        <tr>
          <th>单位</th>

          <th v-for="(roster, index) in dataForm.duty_roster">
          {{roster.units}}
        </th>
          <th></th>
          <th></th>
        </tr>
        <tr>
          <th>带班领导</th>
          <td v-for="(roster, index) in dataForm.duty_roster">
              <el-input placeholder="" v-model="dataForm.duty_roster[index].duty"></el-input>
          </td>
          <td>
          </td>
          <td>
          </td>
        </tr>
        <tr>
          <th>值班长</th>
          <td v-for="(roster, index) in dataForm.duty_roster">
              <el-input placeholder="" v-model="dataForm.duty_roster[index].name"></el-input>
          </td>
          <td>
          </td>
          <td>
          </td>
        </tr>
        <tr>
          <th>值班员</th>
          <td v-for="(roster, index) in dataForm.duty_roster">
              <el-input placeholder="" v-model="dataForm.duty_roster[index].board"></el-input>
          </td>
          <td>
          </td>
          <td>
          </td>
        </tr>

        <tr v-for="i of 6">
          <th>{{dataForm.duty_address[i-1].name}}</th>
          <td colspan="4"><el-input  placeholder="" v-model="dataForm.duty_address[i-1].value"></el-input>
            <div class="td_size" :style="`width: ${data_width[i-1]*2}px`"></div>
            <div class="td_text">({{data_width[i-1]}}米)</div>
          </td>
          <th>{{dataForm.duty_address[i+5] == undefined?"":dataForm.duty_address[i+5].name}}</th>
          <td colspan="4">
            <el-input v-if="dataForm.duty_address[i+5] != undefined" placeholder="" v-model="dataForm.duty_address[i+5].value"></el-input>
          </td>
        </tr>

        <tr>
          <th colspan="3">执勤舰船/飞机</th>
          <th colspan="4">停航舰船</th>
          <th colspan="2">飞机</th>
        </tr>
        <tr>
          <th>{{dataForm.duty_traffic[0].name}}</th>
          <td colspan="2"><el-input v-model="dataForm.duty_traffic[0].value" placeholder=""></el-input></td>
          <th>舰号</th>
          <th>时间</th>
          <th>舰号</th>
          <th>时间</th>
          <th>舰号</th>
          <th>地点</th>
        </tr>

        <tr v-for="i of 7">
          <th>{{dataForm.duty_traffic[i] == undefined?"": dataForm.duty_traffic[i].name}}</th>
          <td colspan="2">
            <el-input v-if="dataForm.duty_traffic[i] != undefined" v-model="dataForm.duty_traffic[i].value" placeholder=""></el-input>
          </td>

          <td><el-input  placeholder="" v-model="dataForm.duty_fact[(i-1)*2].no"></el-input></td>
          <td><el-input  placeholder="" v-model="dataForm.duty_fact[(i-1)*2].time"></el-input></td>

          <td><el-input  placeholder="" v-model="dataForm.duty_fact[(i-1)*2+1].no"></el-input></td>
          <td><el-input  placeholder="" v-model="dataForm.duty_fact[(i-1)*2+1].time"></el-input></td>

          <td><el-input  placeholder="" v-model="dataForm.duty_condition[i-1].no" placeholder=""></el-input></td>
          <td><el-input  placeholder="" v-model="dataForm.duty_condition[i-1].address" placeholder=""></el-input></td>
        </tr>

        <tr>
          <th>其他事项</th>
          <td colspan="8"><el-input v-model="dataForm.duty.other"  placeholder=""></el-input></td>
        </tr>
      </table>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取消</el-button>
      <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { formatDate } from '@/utils/date'
export default {
  data () {
    return {
      visible: false,
      dataForm: {
        duty: {time: '', other: ''},
        duty_roster: [
          { units: '海警局', duty: '', name: '', board: '' },
          { units: '南海分局', duty: '', name: '', board: '' },
          { units: '渔政南海总队', duty: '', name: '', board: '' },
          { units: '海监南海总队', duty: '', name: '', board: '' },
          { units: '海监七支队', duty: '', name: '', board: '' },
          { units: '海监八支队', duty: '', name: '', board: '' }
        ],
        duty_address: [
          { name: '(广州)新洲', value: '' },
          { name: '(广州)海鸥岛', value: '' },
          { name: '(广州)仑头', value: '' },
          { name: '(广州)长洲', value: '' },
          { name: '(江门)新会', value: '' },
          { name: '(东莞)中联', value: '' },
          { name: '沙角锚地', value: '' },
          { name: '桂山锚地', value: '' },
          { name: '三亚', value: '' },
          { name: '湛江', value: '' },
          { name: '坭洲头', value: '' }
        ],
        duty_traffic: [
          { name: '黄岩岛', value: '' },
          { name: '仁爱礁', value: '' },
          { name: '南北康暗沙', value: '' },
          { name: '西南护渔', value: '' },
          { name: '北部湾', value: '' },
          { name: '专项任务', value: '' },
          { name: '其他', value: '' }
        ],
        duty_condition: [
          { no: '', address: '' },
          { no: '', address: '' },
          { no: '', address: '' },
          { no: '', address: '' },
          { no: '', address: '' },
          { no: '', address: '' },
          { no: '', address: '' }
        ],
        duty_fact: [
          { no: '', time: '' },
          { no: '', time: '' },
          { no: '', time: '' },
          { no: '', time: '' },
          { no: '', time: '' },
          { no: '', time: '' },
          { no: '', time: '' },
          { no: '', time: '' },
          { no: '', time: '' },
          { no: '', time: '' },
          { no: '', time: '' },
          { no: '', time: '' },
          { no: '', time: '' },
          { no: '', time: '' }
        ],
        id: 0
      },
      dataRule: {
        time: [
          { required: true, message: '单位不能为空', trigger: 'blur' }
        ],
        other: [
          { required: true, message: '带班领导不能为空', trigger: 'blur' }
        ]
      },
      data_width: [ '136', '96', '164', '240', '200', '60' ]
    }
  },
  components: {
  },
  methods: {
    init (id) {
      this.visible = true
      if (id == null) {
        this.dataForm = {
          duty: {time: '', other: ''},
          duty_roster: [
            { units: '海警局', duty: '', name: '', board: '' },
            { units: '南海分局', duty: '', name: '', board: '' },
            { units: '渔政南海总队', duty: '', name: '', board: '' },
            { units: '海监南海总队', duty: '', name: '', board: '' },
            { units: '海监七支队', duty: '', name: '', board: '' },
            { units: '海监八支队', duty: '', name: '', board: '' }
          ],
          duty_address: [
            { name: '(广州)新洲', value: '' },
            { name: '(广州)海鸥岛', value: '' },
            { name: '(广州)仑头', value: '' },
            { name: '(广州)长洲', value: '' },
            { name: '(江门)新会', value: '' },
            { name: '(东莞)中联', value: '' },
            { name: '沙角锚地', value: '' },
            { name: '桂山锚地', value: '' },
            { name: '三亚', value: '' },
            { name: '湛江', value: '' },
            { name: '坭洲头', value: '' }
          ],
          duty_traffic: [
            { name: '黄岩岛', value: '' },
            { name: '仁爱礁', value: '' },
            { name: '南北康暗沙', value: '' },
            { name: '西南护渔', value: '' },
            { name: '北部湾', value: '' },
            { name: '专项任务', value: '' },
            { name: '其他', value: '' }
          ],
          duty_condition: [
            { no: '', address: '' },
            { no: '', address: '' },
            { no: '', address: '' },
            { no: '', address: '' },
            { no: '', address: '' },
            { no: '', address: '' },
            { no: '', address: '' }
          ],
          duty_fact: [
            { no: '', time: '' },
            { no: '', time: '' },
            { no: '', time: '' },
            { no: '', time: '' },
            { no: '', time: '' },
            { no: '', time: '' },
            { no: '', time: '' },
            { no: '', time: '' },
            { no: '', time: '' },
            { no: '', time: '' },
            { no: '', time: '' },
            { no: '', time: '' },
            { no: '', time: '' },
            { no: '', time: '' }
          ],
          id: 0
        }
        this.dataForm.duty.time = formatDate(new Date(), 'yyyy-MM-dd HH:mm:ss')
        this.dataForm.id = null
      } else {
        this.$http({
          url: this.$http.adornUrl('/app/duty'),
          method: 'get',
          params: this.$http.adornParams({ id: id })
        }).then(({data}) => {
          this.dataForm = data

          this.dataForm.id = id
        })
      }
    },
    // 表单提交
    dataFormSubmit () {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          this.$http({
            url: this.$http.adornUrl(`/duty/duty/${!this.dataForm.id ? 'save' : 'update'}`),
            method: 'post',
            data: this.$http.adornData(this.dataForm)
          }).then(({data}) => {
            if (data && data.code === 0) {
              this.$message({
                message: '操作成功',
                type: 'success',
                duration: 1500,
                onClose: () => {
                  this.visible = false
                  this.$emit('refreshDataList')
                }
              })
            } else {
              this.$message.error(data.msg)
            }
          })
        }
      })
    }
  }
}
</script>
<style>
.leftable{width:100%; border-collapse:collapse;}
.leftable td{line-height:24px; border:1px solid #69B8F4; width: 11%; }
.leftable td img{ vertical-align:middle;}
.leftable td.font{ text-align:center; white-space:nowrap;}
.leftable th{ color:#036; line-height:30px; border:1px solid #69B8F4; text-align: center;}
body{font-size: 20px;padding: 40px;}
        .td_size{ width: 136px; height: 10px; background: #adad5e; display: block; float: left; margin-top: 16px; }
        .td_text{ display: block; float: left; font-size: 16px; margin-top: 8px; }
        .td_val{ width: 200px; margin: 0 auto; display: block; margin-top: 15px; margin-bottom: -18px; }
</style>